<template>
  <!-- 二级菜单 -->
  <div class="menu2">
    <div class="title" @click="scrollerTo">
      {{ title }}
    </div>
  </div>
</template>
<script>
import { scrollerCon } from "@/components/PageMain.vue";
import router from "@/router/index.ts";

export default {
  props: {
    title: String,
    //锚点Id
    anchorId: {
      type: String,
      default: null,
    },
    //路由跳转
    path: {
      type: String,
      default: null,
    },
  },
  components: {},
  setup(props) {
    function scrollerTo() {
      if (props.anchorId != null) {
        const anchorDom = document.querySelector(`#${props.anchorId}`);
        if (anchorDom != null) {
          const top = anchorDom.offsetTop - 65;
          if (scrollerCon != null) {
            scrollerCon.value.scrollTo(0, top);
          }
        }
      }
      if (props.path != null) {
        router.push({ path: props.path });
      }
    }
    return { scrollerTo };
  },
};
</script>
<style lang="scss" scoped>
.menu2 {
  cursor: pointer;
  .title {
    font-size: 0.8rem;
    font-weight: 400;
    padding-left: 1rem;
    line-height: 1.5rem;
    color: #2c3e50;
    &:hover {
      color: #3eaf7c;
    }
  }
}
</style>
